import React, { useState, useEffect } from 'react';
import AwesomeSwiper from 'react-awesome-swiper'
import { NavBar, Icon } from 'antd-mobile'
import { history } from 'umi'

export default function (props) {
  const [config, setConfig] = useState({
    loop: true,
    autoplay: {
      delay: 1500
    },
    pagination: {
      el: '.swiper-pagination'
    }
  })
  const [banner, setBanner] = useState([{
    url: 'https://cdn.pixabay.com/photo/2016/11/18/17/20/living-room-1835923__340.jpg',
  }, {
    url: 'https://cdn.pixabay.com/photo/2016/11/18/17/20/living-room-1835923__340.jpg',
  }, {
    url: 'https://cdn.pixabay.com/photo/2016/11/18/17/20/living-room-1835923__340.jpg',
  }, {
    url: 'https://cdn.pixabay.com/photo/2016/11/18/17/20/living-room-1835923__340.jpg',
  }])

  return (
    <div>
      <NavBar
        mode="dark"
        icon={<Icon type="left" />}
        onLeftClick={() => history.push('/')}
      >房屋详情</NavBar>
      <div>
        <AwesomeSwiper className="banner_info" config={config}>
          <div className="swiper-wrapper">
            {banner?.map((item, index) => (
              <div className="swiper-slide" key={index}>
                <img alt="banner" src={item.url} width="100%" />
              </div>
            ))}
          </div>
          <div className="swiper-pagination"></div>
        </AwesomeSwiper>
      </div>
    </div>
  )
}